<template>
	<transition>
		<div :class="dialogClass" class="q-message-container" :style="offsetValue">
			<div class="q-message-box">
				<div class="q-message-box-header">
					<div class="q-message-box-header-title">{{title}}</div>
					<button v-if="showClose" class="q-message-box-close" @click="close">
						<i class="el-icon-close"></i>
					</button>
				</div>

				<div class="q-message-box-content" :class="{'center': isCenter}">
					<div v-if="statusIcon != ''" class="q-message-box__status" :class="statusIcon"></div>
					<div class="q-message-box__status-content word-wrap">{{message}}</div>
				</div>

				<div v-if="showCancelButton || showConfirmButton" class="q-message-box-footer">
					<el-button v-if="showCancelButton" size="small" @click="cancel">{{ cancelButtonText }}</el-button>
					<el-button v-if="showConfirmButton" size="small" type="primary" @click="confirm">{{ confirmButtonText }}</el-button>
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
	// 标签页宽度变化监控
	let elementResizeDetectorMaker = require("element-resize-detector");
	
	
	export default {
		methods: {
			/**
			 * 取消操作
			 */
			cancel() {
				console.log("取消");
				this.removeDom();
			},
			/**
			 * 确定操作
			 */
			confirm() {
				console.log("确定");
				this.removeDom();
			},
			/**
			 * 关闭操作
			 */
			close() {
				console.log("关闭按钮");
				this.removeDom();
			},
			/**
			 * 移除元素
			 */
			removeDom() {
				// 卸载
				const erd = elementResizeDetectorMaker()
				erd.uninstall(document.getElementById("allContent"));
				
				const _thisDom = this.$el;
				if (_thisDom.remove) {
					_thisDom.remove();
				} else {
					this.parentDom.removeChild(_thisDom);
				}
			}
		},
		mounted() {
			const that = this;
			let erd = elementResizeDetectorMaker()
			erd.listenTo(document.getElementById("allContent"), function (element) {
				that.$nextTick( () => {
					const offsetTop = document.getElementById("allContent").offsetTop;
					const offsetLeft = document.getElementById("allContent").offsetLeft;
					that.top = offsetTop;
					that.left = offsetLeft;
					let top = ('top:' + offsetTop + 'px;');
					let left = ('left:' + offsetLeft + 'px;');
					let opacity = ('opacity: 1;');
					if(that.appendToBody) {
						top = ('top: 0px;');
						left = ('left: 0px;');
					}
					that.offsetValue = (top + ' ' + left + ' ' + opacity);
				});
			});
		},
		computed: {
			// 状态图标
			statusIcon() {
				return this.type ? 'el-icon-' + this.type : '';
			},
		},
		data: function() {
			return {
				parentDom: '',
				title: '', // 标题
				message: '', // 消息正文
				type: '', // 提示类型 ['', 'success', 'error', 'warning', 'info']
				dialogClass: '', // 自定义弹框类名
				cancelButtonText: '取消', // 取消按钮的文本内容
				confirmButtonText: '确定', // 确定按钮的文本内容
				isCenter: false, // 内容是否居中 [false, true]
				showClose: true, // 是否显示关闭按钮 [true, false]
				isOnly: true, // 是否只存在一个框 [true, false]
				showCancelButton: false, // 是否显示取消按钮 [false, true]
				showConfirmButton: true, // 是否显示确认按钮 [true, false]
				top: 0,
				left: 0,
				appendToBody: true, // 是否将内容插入到body[true, false]
				offsetValue: '',
			}
		}
	}
</script>

<style scoped="scoped">
	.q-message-container {
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 2222;
		opacity: 0;
	}

	.q-message-box {
		width: 420px;
		background-color: #FFFFFF;
		border-radius: 5px;
		overflow: hidden;
		margin: 35vh auto 0;
	}
	
	.q-message-box-header {
		background-color: #F7F7F7;
		padding: 10px;
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
	}

	.q-message-box-header-title {
		font-weight: bold;
		flex: 1;
		-webkit-flex: 1;
		-moz-flex: 1;
		-ms-flex: 1;
		-o-flex: 1;
	}

	.q-message-box-close {
		border: none;
		background-color: inherit;
		cursor: pointer;
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-s-user-select: none;
		-o-user-select: none;
		outline: none;
		/* 轮廓线 */
	}

	.q-message-box-close:hover {
		color: #1896DE;
	}

	.q-message-box-content {
		padding: 20px 15px;
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		align-items: center;
	}

	.q-message-box-content.center {
		text-align: center;
	}

	.q-message-box__status {
		font-size: 20px;
		/* position: absolute;
		width: 20px;
		height: 20px; */
	}

	.q-message-box__status.el-icon-success {
		color: #67C23A;
	}

	.q-message-box__status.el-icon-error {
		color: #F56C6C;
	}

	.q-message-box__status.el-icon-warning {
		color: #E6A23C;
	}

	.q-message-box__status.el-icon-info {
		color: #909399;
	}

	.q-message-box__status+.q-message-box__status-content {
		/* padding-left: 25px; */
		padding-left: 10px;
	}

	.q-message-box-footer {
		padding: 10px;
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		align-items: center;
		justify-content: center;
	}

	/* 折行 */
	.word-wrap {
		word-wrap: break-word;
		word-break: break-all;
		white-space: pre-wrap;
	}
</style>
